<template>
    <div>
        <h1>这是child组件</h1>
        父组件传递过来的数据:{{msg}}
        <button @click="send">传值给父组件</button>
    </div>
</template>
<script>
import { defineComponent,onMounted,ref } from 'vue'
export default defineComponent({
    name:'Child',
    //接收父组件传递过来的参数
    //props接收的数据也不能直接改
    props:{
        msg:{
            //数据类型校验
            type:String,
            //是否必传,默认是false
            //requird:true
            //设置默认值
            //default:'父传子的默认值'
        }
    },
    setup(props,ctx) {
        let childMsg=ref('我是子组件的数据')
        let childNum=ref(20)
        let send=()=>{
            //通过ctx.emit分发事件
            //emit第一个参数是事件名称(自定义),第二个是传递的数据
            ctx.emit('sendMsg',childMsg.value)
        }
        console.log(props.msg);

        //页面加载就将子组件数据传递给父组件(两个数据，数组类型)
        onMounted(()=>{
            //数组类型(传一个参数)
            //ctx.emit('sendMsg',[childMsg.value,childNum.value])
            //对象类型(传两个参数)
            ctx.emit('sendMsg',{
                msg:childMsg.value,
                num:childNum.value
            })
        })
        return {
            childMsg,
            send
        }
    },
})
</script>
